import { Component } from 'react';
import { Card, Row, Col } from 'antd';

class CorporateInfo extends Component {

  render() {
    const {
      headStyle,
      renderField,
      changedInformation,
      changedImg,
      formatDate,
    } = this.props;
    return (
      <Card
      title={ '法人代表信息' }
      headStyle={headStyle}
      style={{ marginBottom: '20px' }}
    >
      <Row>
        <Col span={10}>
          <div style={{ marginBottom: '10px' }}>姓名：{renderField('legalPersonName')}</div>
          <div style={{ marginBottom: '10px' }}>身份证号：{renderField('legalPersonCode')}</div>
          <div style={{ marginBottom: '10px' }}>
            证件有效期：{renderField('legalParValStaTime', val => formatDate(val,'YYYY-MM-DD'))} ~{' '}
            {renderField('legalParValEndTime', val => formatDate(val,'YYYY-MM-DD'))}
          </div>
        </Col>
        <Col span={12}>
          <div style={{ marginBottom: '10px' }}>证件：</div>
          {renderField('legalPerFacePhotoInfo', val => val) && (
            <img
              style={{
                ...{ maxWidth: '50%' },
                ...(changedInformation.legalPerFacePhotoInfo ? changedImg : null),
              }}
              src={renderField('legalPerFacePhotoInfo', val => val).url}
              alt="身份证正面"
            />
          )}
          {renderField('legalPerBackPhotoInfo', val => val) && (
            <img
              style={{
                ...{ maxWidth: '50%' },
                ...(changedInformation.legalPerBackPhotoInfo ? changedImg : null),
              }}
              src={renderField('legalPerBackPhotoInfo', val => val).url}
              alt="身份证反面"
            />
          )}
        </Col>
      </Row>
    </Card>
    );
  }
}

export default CorporateInfo;
